<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 
        什么是实例的生命周期？
            实例在被创建前经过的一系列初始化过程叫生命周期
            实例在从创建到销毁的过程
        什么是生命周期钩子？
            在生命周期中被自动调用的函数叫做生命周期钩子
        生命周期钩子的用途
            为我们提供执行自定义逻辑的机会
        钩子函数有哪些？
        create(创建)：beforeCreate,created
        mount(创建)：befreMount,mounted
        update(更新)：beforeUpdate,updated
        destroy(销毁)：beforeDestroy,destroyed
     -->
     <div id="box">
         <h1>{{ msg }}</h1>
     </div>
    <script>
         var vm=new Vue({
             el:"#box",
             data:{
                msg:"hello Vue.js"
             },
             //钩子函数书写的位置，和data.methods等配置项同级写
             beforeCreate:function(){
                 console.log("**************beforeCreate*********");
                 console.log("el:"+this.$el);
                 console.log("data:"+this.$data); 
                 console.log("msg:"+this.msg);
                 //三者都没有创建
             },
             created:function(){
                console.log("**************created************");
                console.log("el:"+this.$el);
                 console.log("data:"+this.$data); 
                 console.log("msg:"+this.msg);
                 //el没有创建，datat和msg已经创建
             }
             ,
             beforeMount:function(){
                console.log("**************beforeMount************");
                console.log("beforeMount:"+this.$el);
                 console.log("data:"+this.$data); 
                 console.log("msg:"+this.msg);
                 //el并没有真正的创建出来，而是进行了一个占位，datat和msg已经创建
             }
             ,
            mounted:function(){
                console.log("**************mounted************");
                console.log("mounted:"+this.$el);
                 console.log("data:"+this.$data); 
                 console.log("msg:"+this.msg);
                 //el已经替换成了真正的数据 ，datat和msg已经创建
             }
             ,
            beforeUpdate:function(){
                console.log("**************beforeUpdate************");
                console.log("beforeUpdate :"+this.$el);
                 console.log("data:"+this.$data); 
                 console.log("msg:"+this.msg);

             }
             ,
            updated:function(){
                console.log("**************updated************");
                console.log("updated :"+this.$el);
                 console.log("data:"+this.$data); 
                 console.log("msg:"+this.msg);
                //数据更新后，这两个方法会执行
             },
             beforeDestroy:function(){
                console.log("**************beforeDestroy************");
                console.log("beforeDestroy :"+this.$el);
                 console.log("data:"+this.$data); 
                 console.log("msg:"+this.msg);
             },
             destroyed:function(){
                console.log("**************destroyed************");
                console.log("destroyed :"+this.$el);
                 console.log("data:"+this.$data); 
                 console.log("msg:"+this.msg);
                 /*
                    destroy在实例销毁的时候执行
                    实例销毁后，其身上所有的数据和方法都会销毁，不再生效 
                 */

             },

             /*
                el 是设置挂载， el:select 用来将容器和数据进行关联 挂载
             */
         })
    </script>
</body>
</html>